<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '@/store';
import { useNurseBill } from '@/service';
import Taro, { showToast, showLoading, hideLoading, getCurrentInstance, navigateBack } from '@tarojs/taro';
import { SUCCESS_MSG_DURATION } from '@/constants';
import { useRouterPush } from '@/composables';
import { storeToRefs } from 'pinia';
import { useEmitter } from '@/hooks/common';

const {
    router: {
        params: { type, amt, orderId }
    }
}: any = getCurrentInstance();

const { toBillExtend } = useRouterPush();

// definePageConfig({
//     navigationBarTitleText: type == 1 ? '申请开票' : '发票详情'
// });
Taro.setNavigationBarTitle({
    title: type == 1 ? '申请开票' : '发票详情'
});

const emitter = useEmitter();

const { addNurseUserBillInvoice } = useNurseBill();

const { nurseUser } = storeToRefs(useAuthStore());

const formData = ref({
    receiveType: '1',
    phone: '',
    email: '',
    invoiceHeader: '',
    dutyParagraph: '',
    mode: '1',
    totalPrice: amt,
    orderId,
    userId: nurseUser.value.id,
    extend: '',
    status: '1'
});

emitter.$on('billExtend', (data: any) => {
    formData.value.extend = data;
});

const ruleForm = ref<any>(null);

const submit = async () => {
    const { valid } = await ruleForm.value.validate();

    if (!valid) return;

    showLoading({ title: '正在申请开票...' });
    const { error } = await addNurseUserBillInvoice({
        ...formData.value
    });
    hideLoading();
    if (!error) {
        showToast({
            title: '申请开票成功',
            icon: 'success',
            duration: SUCCESS_MSG_DURATION
        });
        emitter.$emit('order_refresh');
        navigateBack();
    }
};
</script>
<template>
    <basic-layout>
        <!-- <custom-navbar :title="type == 1 ? '申请开票' : '发票详情'" showLeft /> -->
        <view class="w-375px flex-col-center">
            <view class="w-360px">
                <nut-form ref="ruleForm" class="w-full" :model-value="formData">
                    <nut-form-item label="抬头类型" prop="receiveType" :rules="[{ required: true, message: '请选择抬头类型' }]">
                        <nut-radio-group v-model="formData.receiveType" direction="horizontal">
                            <nut-radio label="1">企业单位</nut-radio>
                            <nut-radio label="2">个人/非企业</nut-radio>
                        </nut-radio-group>
                    </nut-form-item>
                    <nut-form-item label="发票抬头" prop="invoiceHeader" :rules="[{ required: true, message: '请填写发票抬头' }]">
                        <nut-input v-model="formData.invoiceHeader" placeholder="请输入发票抬头" type="text" />
                    </nut-form-item>

                    <nut-form-item v-if="formData.receiveType == '1'" prop="dutyParagraph" label="税号"
                        :rules="[{ required: true, message: '请填写发票抬头' }]">
                        <nut-input v-model="formData.dutyParagraph" placeholder="请输入纳税人税号" type="text" />
                    </nut-form-item>
                    <nut-form-item v-if="formData.receiveType == '2'" prop="dutyParagraph" label="身份证号">
                        <nut-input v-model="formData.dutyParagraph" placeholder="请输入身份证号" type="text" />
                    </nut-form-item>
                    <!--                    <nut-form-item label="税号" prop="dutyParagraph" :rules="[
                        { required: true, message: '请填写税号' },
                    ]">
                        <nut-input v-model="formData.dutyParagraph" placeholder="请输入纳税人税号" type="text" />
                    </nut-form-item>-->
                    <view class="w-full flex-center justify-between">
                        <nut-form-item label="更多内容">
                            <view @click="toBillExtend(formData.extend)"></view>
                        </nut-form-item>

                        <view class="w-1/5 flex-col-center" @click="toBillExtend(formData.extend)">
                            <view class="i-local-right-bold w-20px h-20px" />
                        </view>
                    </view>
                    <nut-form-item prop="amt" label="总金额">
                        <view class="text-primary">￥{{ formData.totalPrice }}</view>
                    </nut-form-item>
                    <nut-form-item prop="mode" label="接收方式">
                        <nut-radio-group v-model="formData.mode" direction="horizontal">
                            <nut-radio label="1">短信</nut-radio>
                            <nut-radio label="2">电子邮件</nut-radio>
                        </nut-radio-group>
                    </nut-form-item>
                    <nut-form-item v-if="formData.mode == '1'" prop="phone" label="手机号">
                        <nut-input v-model="formData.phone" placeholder="请输入手机号" type="text" />
                    </nut-form-item>
                    <nut-form-item v-if="formData.mode == '2'" prop="email" label="电子邮件">
                        <nut-input v-model="formData.email" placeholder="请输入电子邮件" type="text" />
                    </nut-form-item>
                    <nut-cell>
                        <basic-button text="提交" class="mt-2" @on-click="submit" />
                    </nut-cell>
                </nut-form>
            </view>
        </view>
    </basic-layout>
</template>
